<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <script src="js/i18next-1.7.7.min.js" type="text/javascript" charset="utf-8"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
		i18n.init({
	        debug: false
		}, function(t) {
        	document.getElementById('title').innerText = t('app.name');
        	document.getElementById('chats').innerText = t('nav.chats');
        	document.getElementById('contacts').innerText = t('nav.contacts');
        	document.getElementById('settings').innerText = t('nav.settings');
    	});
    </script>
</head>
<body>
	<header class="mui-bar mui-bar-nav">
		<a id="info" class="mui-icon mui-icon-info-filled mui-pull-right" style="color: #999;"></a>
		<h1 id="title" class="mui-title"></h1>
	</header>
	<nav class="mui-bar mui-bar-tab">
			<a id="defaultTab" class="mui-tab-item mui-active" href="templates/tab-webview-subpage-chat.html">
				<span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span>
				<span id="chats" class="mui-tab-label">Chats</span>
			</a>
			<a class="mui-tab-item" href="templates/tab-webview-subpage-contact.html">
				<span class="mui-icon mui-icon-contact"></span>
				<span id="contacts" class="mui-tab-label">Contacts</span>
			</a>
			<a class="mui-tab-item" href="templates/tab-webview-subpage-setting.html">
				<span class="mui-icon mui-icon-gear"></span>
				<span id="settings" class="mui-tab-label">Setting</span>
			</a>
		</nav>
	<div class="mui-content">
		
	</div>
	<script type="text/javascript" charset="utf-8">
			var main = null;
			var subpages = ['templates/tab-webview-subpage-chat.html','templates/tab-webview-subpage-contact.html','templates/tab-webview-subpage-setting.html'];
			var subpage_style = {
				top: '46px',
				bottom: '50px'
			};
			
			//创建子页面，首个选项卡页面显示，其它均隐藏；
			mui.plusReady(function(){
				if (mui.os.android) {
					plus.screen.lockOrientation("portrait-primary");
				}
				var self = plus.webview.currentWebview();
				main = plus.webview.currentWebview();
				for(var i=0;i<3;i++){
					var sub = plus.webview.create(subpages[i],subpages[i],subpage_style,{sender: self.sender});
					if(i>0){
						sub.hide();
					}
					self.append(sub);
				}
			});
			
			//当前激活选项
			var activeTab = subpages[0];
			var title = document.getElementById("title");
			//选项卡点击事件
			mui('.mui-bar-tab').on('tap', 'a', function(e) {
				var targetTab = this.getAttribute('href');
				if (targetTab == activeTab) {
					return;
				}
				//更换标题
				title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;
				//显示目标选项卡
				plus.webview.show(targetTab);
				//隐藏当前;
				plus.webview.hide(activeTab);
				//更改当前活跃的选项卡
				activeTab = targetTab;
			});
			
			//自定义事件，模拟点击“首页选项卡”
			document.addEventListener('gohome',function () {
				var defaultTab = document.getElementById("defaultTab");
				//模拟首页点击
				mui.trigger(defaultTab,'tap');
				//切换选项卡高亮
				var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
				if(defaultTab!==current){
					current.classList.remove('mui-active');
					defaultTab.classList.add('mui-active');
				}
			});
			
			 //处理右上角关于图标的点击事件；
			var subWebview = null,
				template = null;
			document.getElementById('info').addEventListener('tap', function() {
				mui.openWindow({
				    url: 'templates/info.html', 
				    id:'info',
				    show:{
				      aniShow: 'zoom-fade-out',
				      duration: 300
				    }
				});
			});
			
			//首页返回键处理
			 //处理逻辑：1秒内，连续两次按返回键，则退出应用；
			var first = null;
			mui.back = function() {
				//首次按键，提示‘再按一次退出应用’
				if (!first) {
					first = new Date().getTime();
					mui.toast('再按一次退出应用');
					setTimeout(function() {
						first = null;
					}, 1000);
				} else {
					if (new Date().getTime() - first < 1000) {
						plus.runtime.quit();
					}
				}
			};
		</script>
</body>
</html>